<template>
  <div class="container"
       v-title
       data-title='已推荐客户'>
    <div class="container-indexed-list">
      <div class="indexed-list-search">
        <form @click="handleFormSubmit()">
          <input type="search"
                 v-model="newItem"
                 @focus="handleFocus"
                 @blur="handleBlur" />
        </form>
        <i class="fa fa-search indexed-search"></i>
        <div class="header-placeholder">
          <i class="fa fa-search"></i>
          <span>搜索</span>
        </div>
      </div>
      <div class="indexed-list-inner">
        <div class="indexed-addBtn">
          <a href="javascript:;"
             class="recommend-customers-btn"
             @click="toAddCustomer()">
            <img src="../../assets/images/addIcon.png">新增客户
          </a>
        </div>
        <ul>
          <li class="view-childen-list"
              v-for="(item, index) in customerLists"
              :key="index"
              @click="toAddCustomerLink(item)"
              :class="{active:item.isChecked}">
            <div class="template-row-list">
              <label class="label-title">{{item.name}}</label>
              <div class="row-content">{{item.mobile}}</div>
            </div>
            <i class="fa fa-check"></i>
          </li>
        </ul>
      </div>
    </div>
    <div class="fixed-footer footer-info"
         id="fixedFooter">
      <div class="template-footer-list">
        <div class="template-footer-left">
          <div class="parallel-line-two">
            <p class="title">{{premisesName.name}}</p>
            <p class="info-num">已选择客户<span class="num">{{premisesName.number}}</span>人</p>
          </div>
        </div>
        <div class="template-footer-right">
          <button class="btn btn-primary"
                  @click="toBatchAddCustomer()">推荐</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newItem: "",
      premisesName: {
        name: "",
        number: 0,
        protectTime: "",
        specialTime: "",
        protectTimeType: ""
      },
      customerLists: []
    };
  },
  watch: {
    newItem: function (val, oldVal) {
      this.initPremises();
    }
  },
  components: {},
  mounted: function () {
    this.initPremises();
    $("#goble_menu_div").hide();
    $(".indexed-list-search").click(function () {
      $(this).addClass("active");
      $(".indexed-list-search input").focus();
    });
    $(".indexed-list-search input").blur(function () {
      if ($(this).val().length < 1) {
        $(".indexed-list-search").removeClass("active");
      }
    });
    var wHeight = $(window).height();
    $(".container-indexed-list").css("height", wHeight + "px");
    $(".indexed-list-inner").css("height", wHeight - 40 + "px");
    $("body").scrollTop(0);
  },
  methods: {
    initPremises() {
      var _self = this;
      var params = {
        premisesId: this.$route.params.id,
        searchContent: this.newItem
      };
      var body = {};
      body.params = params;
      var url = this.utilHelper.apiUrl + "/api/getHasCPcusList";
      this.$http.post(url, body).then(
        (response) => {
          var body = response.body;
          this.customerLists = [];
          if (body.result == 1) {
            var customerList =
              body.resData.customerListByStaffIdResDto.customerList;
            if (customerList) {
              for (
                var i = 0;
                i <
                body.resData.customerListByStaffIdResDto.customerList.length;
                i++
              ) {
                _self.customerLists.push({
                  name:
                    body.resData.customerListByStaffIdResDto.customerList[i]
                      .name,
                  mobile:
                    body.resData.customerListByStaffIdResDto.customerList[i]
                      .mobile,
                  gender:
                    body.resData.customerListByStaffIdResDto.customerList[i]
                      .gender,
                  email:
                    body.resData.customerListByStaffIdResDto.customerList[i]
                      .email,
                  isChecked: false
                });
              }
            }
            _self.premisesName.name =
              body.resData.customerListByStaffIdResDto.premisesName;
            _self.premisesName.specialTime =
              body.resData.customerListByStaffIdResDto.specialTime;
            _self.premisesName.specialTimeType =
              body.resData.customerListByStaffIdResDto.specialTimeType;
            _self.premisesName.protectTime =
              body.resData.customerListByStaffIdResDto.protectTime;
            _self.premisesName.protectTimeType =
              body.resData.customerListByStaffIdResDto.protectTimeType;
            _self.premisesName.reportProtect =
              body.resData.customerListByStaffIdResDto.reportProtect;
            _self.premisesName.reportProtectType =
              body.resData.customerListByStaffIdResDto.reportProtectType;
            _self.premisesName.reportWay =
              body.resData.customerListByStaffIdResDto.reportWay;
          }
        },
        (response) => {}
      );
    },
    toAddCustomer() {
      this.$router.push({
        name: "addCustomer",
        params: {
          id: this.$route.params.id,
          name: this.premisesName.name,
          specialTime: this.premisesName.specialTime,
          specialTimeType: this.premisesName.specialTimeType,
          protectTime: this.premisesName.protectTime,
          protectTimeType: this.premisesName.protectTimeType,
          reportProtect: this.premisesName.reportProtect,
          reportProtectType: this.premisesName.reportProtectType,
          reportWay: this.premisesName.reportWay
        }
      });
    },
    toAddCustomerLink(item) {
      var _self = this;
      item.isChecked = !item.isChecked;
      var numL = 0;
      for (var j = 0; j < _self.customerLists.length; j++) {
        if (_self.customerLists[j].isChecked) {
          numL++;
        }
      }
      _self.premisesName.number = numL;
    },
    toBatchAddCustomer() {
      var _self = this;
      var customerSubmitList = [];
      var userNameList = [];
      var mobileList = [];
      var oNum = 0;
      for (var ii = 0; ii < _self.customerLists.length; ii++) {
        var customer = _self.customerLists[ii];
        if (customer.isChecked) {
          delete customer.email;
          delete customer.isChecked;
          customerSubmitList[oNum] = customer;
          userNameList.push(customer.name);
          mobileList.push(customer.mobile);
          oNum++;
        }
      }
      if (!oNum) {
        layer.msg("请选择客户", {
          time: 2000
        });
        return false;
      }
      this.$router.push({
        name: "addCustomer",
        params: {
          id: this.$route.params.id,
          name: this.premisesName.name,
          customerList: JSON.parse(JSON.stringify(customerSubmitList)),
          userNameList: userNameList.join("、"),
          mobileList: mobileList.join("、"),
          specialTime: this.premisesName.specialTime,
          specialTimeType: this.premisesName.specialTimeType,
          protectTime: this.premisesName.protectTime,
          protectTimeType: this.premisesName.protectTimeType,
          reportProtect: this.premisesName.reportProtect,
          reportProtectType: this.premisesName.reportProtectType,
          reportWay: this.premisesName.reportWay
        }
      });
    },
    integrationData() {
      var _self = this;
      var customerSubmitList = [];
      var oNum = 0;
      for (var ii = 0; ii < _self.customerLists.length; ii++) {
        var customer = _self.customerLists[ii];
        if (customer.isChecked) {
          delete customer.email;
          delete customer.isChecked;
          customerSubmitList[oNum] = customer;
          oNum++;
        }
      }
      if (!oNum) {
        layer.msg("请选择客户", {
          time: 2000
        });
        return false;
      }

      var params = {};
      params.staffId = window.localStorage.getItem("3_userId");
      params.customerList = JSON.parse(JSON.stringify(customerSubmitList));
      params.premisesId = this.$route.params.id;
      var body = {};
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/addReport";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        var resData = body.resData;
        var errorMsg = body.errorMsg;
        if (body.result == 1) {
          var returnMsg = JSON.parse(resData.resultMsg);
          var successCount = returnMsg.successCount;
          var failCount = returnMsg.failCount;
          var failMsg = returnMsg.failMsg;
          var successCountMsg = "成功[" + successCount + "]条";
          var failCountMsg = "失败[" + failCount + "]条";
          if (successCount == 0) {
            _self.showRecommend = true;
            layer.msg(failMsg, {
              time: 3000
            });
          } else {
            if (failCount == 0 && successCount > 0) {
              layer.msg(
                "提交成功",
                {
                  time: 2000
                },
                function () {
                  _self.$router.push({
                    path: "/declare"
                  });
                }
              );
            } else {
              layer.msg(
                successCountMsg + "\n" + failCountMsg + "\n" + failMsg,
                {
                  time: 2000
                },
                function () {
                  _self.$router.push({
                    path: "/declare"
                  });
                }
              );
            }
          }
        } else if (body.code != 2) {
          let msg = "";
          if (body.errorMsg) {
            msg = body.errorMsg;
          } else if (resData.resultMsg) {
            msg = resData.resultMsg;
          }
          layer.msg("操作失败:" + msg, {
            time: 2000
          });
        }
      });
    },
    handleFormSubmit(event) {
      event.preventDefault();
    },
    handleFocus: function () {
      document.getElementById("fixedFooter").style.display = "none";
    },
    handleBlur: function () {
      document.getElementById("fixedFooter").style.display = "block";
    }
  }
};
</script>
<style scoped>
.template-row-list {
  padding-left: 130px;
}
.template-row-list .label-title {
  width: 130px;
}
</style>